<template>
    <div class="sea-page-row">
        <div class="width-25 box" style="height: 100%;box-sizing: border-box;">
            <el-button type="primary" class="btn-block">Compose</el-button>
            <div class="text-block border-bottom">
                <strong><i class="fa fa-fw fa-inbox"></i> Inbox：</strong>
                <span class="badge bg-orange pull-right">1</span>
            </div>
            <div class="text-block border-bottom">
                <strong><i class="fa fa-fw fa-envelope-o"></i> Sent：</strong>
                <span class="badge bg-orange pull-right">4</span>
            </div>
            <div class="text-block border-bottom">
                <strong><i class="fa fa-fw fa-file-text-o"></i> Drafts：</strong>
                <span class="badge bg-gray pull-right">32</span>
            </div>
            <div class="text-block border-bottom">
                <strong><i class="fa fa-fw fa-filter"></i> Junk：</strong>
                <span class="badge bg-gray pull-right">1</span>
            </div>
            <div class="text-block border-bottom">
                <strong><i class="fa fa-fw fa-trash-o"></i> Trash：</strong>
                <span class="badge bg-gray pull-right">2</span>
            </div>
        </div>

        <div class="page-body box">
            <div class="flex-column-gap" style="height: 100%">
                <div>
                    <h4 class="pull-left">Inbox</h4>

                    <el-input class="pull-right" placeholder="Search Mail" style="width: 30%">
                        <template #append>
                            <el-button title="搜索"><i class="fa fa-fw fa-search"></i></el-button>
                        </template>
                    </el-input>
                </div>

                <div>
                    <div class="pull-left sea-gap-group">
                        <el-button><i class="fa fa-fw fa-square-o"></i></el-button>
                        <el-button-group>
                            <el-button><i class="fa fa-fw fa-trash-o"></i></el-button>
                            <el-button><i class="fa fa-fw fa-reply"></i></el-button>
                            <el-button><i class="fa fa-fw fa-share"></i></el-button>
                        </el-button-group>
                        <el-button><i class="fa fa-fw fa-refresh"></i></el-button>
                    </div>

                    <div class="pull-right sea-gap-group">
                        <span>133/200</span>
                        <el-button-group>
                            <el-button><i class="fa fa-fw fa-chevron-left"></i></el-button>
                            <el-button><i class="fa fa-fw fa-chevron-right"></i></el-button>
                        </el-button-group>
                    </div>
                </div>

                <div class="flex-body">
                    <el-table :data="tableData" :show-header="false">
                        <el-table-column prop="test1" label="星标" width="56">
                            <i class="fa fa-fw fa-star text-orange"></i>
                        </el-table-column>
                        <el-table-column label="发送" width="120">
                            <template #default="{row}">
                                <a>{{ row.name }}</a>
                            </template>
                        </el-table-column>
                        <el-table-column prop="content" label="内容" show-overflow-tooltip>
                            <template #default="{row}">
                                <article>
                                    <b>{{ row.title }}</b>
                                    <span> - {{ row.content }}</span>
                                </article>
                            </template>
                        </el-table-column>
                        <el-table-column prop="test1" label="附件" width="56">
                            <i class="fa fa-fw fa-paperclip"></i>
                        </el-table-column>
                        <el-table-column prop="date" label="日期" width="180"></el-table-column>
                    </el-table>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name: "inbox",
    data() {
        return {
            tableData: [{
                name: '王小虎',
                date: '2016-05-02',
                title: 'SeaAdmin 1.0 Issue',
                content: 'Trying to find a solution to this problem.'
            }, {
                name: '王小虎',
                date: '2016-05-04',
                title: 'SeaAdmin 1.0 Issue',
                content: 'Trying to find a solution to this problem.'
            }, {
                name: '王小虎',
                date: '2016-05-01',
                title: 'SeaAdmin 1.0 Issue',
                content: 'Trying to find a solution to this problem.'
            }, {
                name: '王小虎',
                date: '2016-05-03',
                title: 'SeaAdmin 1.0 Issue',
                content: 'Trying to find a solution to this problem.'
            }]
        }
    }
}
</script>

<style scoped>
</style>
